<template>
  <div id="home">
    <Navbar class="home-nav">
      <div slot="center">购物街</div>
    </Navbar>
    <tab-control :titles="['流行','新款','筛选']"
                class="tab-control"
                @tabClick="tabClick"
                ref="tabControl1"
                v-show="isTabFixed">
    </tab-control>
    <Scroll class="wrapper"
            ref="scroll"
            :probe-type="3"
            @scroll="contentScroll"
            @pullingUp="loadMore">
      <home-swiper :banner="banner" @swiperImgLoad="swiperImgLoad"></home-swiper>
      <recommend-view :recommend="recommend"></recommend-view>
      <feature-view></feature-view>
      <tab-control :titles="['流行','新款','筛选']"
                  @tabClick="tabClick"
                  ref="tabControl2">
      </tab-control>
      <goods-list :goods="showGoods"></goods-list>
    </Scroll>
    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>

  </div>
</template>

<script>
import Navbar from 'components/common/navbar/Navbar'
import HomeSwiper from './childComps/HomeSwiper'
import RecommendView from './childComps/RecommendView'
import FeatureView from './childComps/FeatureView'
import TabControl from 'components/content/tabControl/TabControl'
import GoodsList from 'components/content/goods/GoodsList'
import Scroll from 'components/common/scroll/Scroll'
import BackTop from 'components/content/backtop/BackTop'

import { getHomeMultidata, getHomeGoods } from 'network/home'

import { itemListenerMixin } from 'common/mixin'

export default {
  name: 'Home',
  components: {
    Navbar,
    HomeSwiper,
    RecommendView,
    FeatureView,
    TabControl,
    GoodsList,
    Scroll,
    BackTop
  },
  mixins: [itemListenerMixin],
  data () {
    return {
      banner: [],
      recommend: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] }
      },
      currentType: 'pop',
      tabOffsetTop: 0,
      isTabFixed: false,
      // 离开home组件时,保存的位置信息
      saveY: 0,
      isShowBackTop: false
    }
  },
  computed: {
    showGoods () {
      return this.goods[this.currentType].list
    }
  },
  created () {
    // 请求多个数据
    this.getHomeMultidata()
    // 请求商品数据
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
  },
  mounted () {
    // 利用混入，减少重复代码
    // const refresh = debounce(this.$refs.scroll.refresh, 50)
    // // 1.图片加载完成的事件监听
    // this.$bus.$on('ItemImageLoad', () => {
    //   refresh()
    // })
  },
  activated () {
    this.$refs.scroll.scrollTo(0, this.saveY, 0)
    console.log(this.saveY)
  },
  deactivated () {
    // 1.保存离开时的位置信息到this.saveY
    this.saveY = this.$refs.scroll.scroll.y
    // 2.取消全局事件监听（主页图片加载的监听）因为此时设置了keep-alive，所以离开时调用的是deactivated()
    this.$bus.$off('itemImageLoad', this.itemImgListener)
  },
  methods: {
    /*
    * 事件监听相关方法
    */
    tabClick (index) {
      switch (index) {
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
      }
      this.$refs.tabControl1.currentIndex = index
      this.$refs.tabControl2.currentIndex = index
    },
    // 回到顶部
    backClick () {
      console.log('回到顶部')
      this.$refs.scroll.scrollTo(0, 0)
    },
    // 监听滑动位置,决定backtop是否显示
    contentScroll (position) {
      // console.log(position)
      // 判断BackTop是否显示
      this.isShowBackTop = (-position.y) > 1000
      // 判断TabControl是否吸顶
      this.isTabFixed = (-position.y) > this.tabOffsetTop
    },
    // 下拉加载更多
    loadMore () {
      // console.log('更多')
      this.getHomeGoods(this.currentType)
      // 重新计算 BetterScroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
      // this.$refs.scroll.scroll.refresh()
    },
    // 轮播图加载完后
    swiperImgLoad () {
      // console.log(this.$refs.tabControl2.$el.offsetTop)
      this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
    },
    /*
    * 网络请求相关方法
     */
    getHomeMultidata () {
      getHomeMultidata().then(res => {
        this.banner = res.data.banner.list
        this.recommend = res.data.recommend.list
      })
    },
    getHomeGoods (type) {
      const page = this.goods[type].page + 1
      getHomeGoods(type, page).then(res => {
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page += 1

        // 调用scroll对象的finishPullUp方法,使其可以多次下拉加载更多
        this.$refs.scroll.finishPullUp()
      })
    }
  }
}
</script>

<style scoped lang="scss">
  #home{
    /*padding-top: 44px;*/
    height: 100vh;
    position: relative;
    .home-nav{
      background-color: var(--color-tint);
      color: white;
      /*position: fixed;*/
      /*left: 0;*/
      /*top: 0;*/
      /*right: 0;*/
      /*z-index: 99;*/
    }
    .tab-control{
      position: relative;
      z-index: 99;
      background-color: #fff;
    }
    .wrapper{
      position: absolute;
      top: 44px;
      bottom: 49px;
      left: 0;
      right: 0;
      overflow: hidden;

      /*height: cacl(100% - 93px);*/
      /*overflow: hidden;*/
      /*margin-top: 44px;*/
    }
  }

</style>
